<template>
  <div id="app">
    <el-container>
      <el-header>
        <header-content></header-content>
      </el-header>
      <el-main
        >
<router-view></router-view>
        <!-- <main-box></main-box> -->
      </el-main>
      <el-footer>
        <footer-content></footer-content>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import headerContent from "@/components/header/index.vue";
// import mainBox from "@/components/mainBox/index.vue";
import footerContent from "@/components/footer/index.vue";
export default {
  name: "App",
  components: {
    headerContent,
    // mainBox,
    footerContent,
  },
  data() {
    return {
      count: 30,
    };
  },
  methods: {
    load() {
      this.count += 2;
    },
  },
};
</script>

<style lang="scss">
/* 修改后的样式 */
body {
  margin: 0; /* 移除默认边距 */
  padding: 0;
  min-height: 100vh; /* 确保页面占满视口高度 */
  box-sizing: border-box;
}

.el-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-header,
.el-footer {
  width: 100%;
  background-color: #6666CC;
  color: #fff;
  text-align: center;
  line-height: 80px !important;
  height: 80px !important;
}

.el-header {
  position: sticky; /* 使用sticky定位 */
  top: 0;
  z-index: 10; /* 确保在内容上方 */
}

.el-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
 line-height: 100px !important;
  height: 100px !important;
}

.el-main {
  flex: 1; /* 占据剩余空间 */
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  padding: 20px 0;
  overflow-y: auto; /* 自身滚动而非整个页面 */
}

/* 无限滚动列表样式 */
.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>
